<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Avatar 头像</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	<script src="../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-fit {
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.demo-fit .block {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.demo-fit .title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<el-row class="demo-avatar demo-basic">
		<el-col :span="12">
			<div class="sub-title">圆形</div>
			<div class="demo-basic--circle">
				<div class="block"><el-avatar :size="70" :src="circleUrl"></el-avatar></div>
				<div class="block"><el-avatar size="small" :src="circleUrl"></el-avatar></div>
				<div class="block"><el-avatar size="" :src="circleUrl"></el-avatar></div>
				<div class="block"><el-avatar size="large" :src="circleUrl"></el-avatar></div>
				<!-- <div v-for="size in sizeList" :key="size" class="block">
					<el-avatar :size="size" :src="circleUrl"></el-avatar>
				</div> -->
			</div>
		</el-col>
		<el-col :span="12">
			<div class="sub-title">方形</div>
			<div class="demo-basic--circle">
				<div class="block"><el-avatar shape="square" :size="70" :src="squareUrl"></el-avatar></div>
				<div class="block"><el-avatar shape="square" size="small" :src="squareUrl"></el-avatar></div>
				<div class="block"><el-avatar shape="square" size="" :src="squareUrl"></el-avatar></div>
				<div class="block"><el-avatar shape="square" size="large" :src="squareUrl"></el-avatar></div>
			</div>
		</el-col>
	</el-row>
	
	<el-divider content-position="left">展示类型</el-divider><!-- =============================================================== -->
	<p class="desc">支持使用图标、图片或者文字作为 Avatar。</p>
	<div class="demo-type">
		<div><el-avatar><el-avatar :icon="Icons.UserFilled"></el-avatar></div>
		<div><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></div>
		<div><el-avatar> user </el-avatar></div>
	</div>
	
	<el-divider content-position="left">回退行为</el-divider><!-- =============================================================== -->
	<p class="desc">图片加载失败时的回退行为。el-avatar标签的src图片加载成功是不会触发@error，也不会显示里面的img标签图片；但el-avatar标签的src图片加载失败，则会触发@error，并显示里面的img标签图片</p>
	<div class="demo-type">
		<div>
			<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng0.png" @error="errorHandler">
				<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
			</el-avatar>
		</div>
	</div>
	
	<el-divider content-position="left">适应容器</el-divider><!-- =============================================================== -->
	<p class="desc">当使用图片作为用户头像时，设置该图片如何在容器中展示。与object-fit 属性一致</p>
	<div class="demo-fit">
		<div class="block">
			<span class="title">fill</span>
			<el-avatar shape="square" :size="100" fit="fill" :src="img_url" />
		</div>
		<div class="block">
			<span class="title">contain</span>
			<el-avatar shape="square" :size="100" fit="contain" :src="img_url" />
		</div>
		<div class="block">
			<span class="title">cover</span>
			<el-avatar shape="square" :size="100" fit="cover" :src="img_url" />
		</div>
		<div class="block">
			<span class="title">none</span>
			<el-avatar shape="square" :size="100" fit="none" :src="img_url" />
		</div>
		<div class="block">
			<span class="title">scale-down</span>
			<el-avatar shape="square" :size="100" fit="scale-down" :src="img_url" />
		</div>
	</div>
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			message: 'Hello Vue!!',
			circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
			squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
			sizeList: ['small', '', 'large'],
			img_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		},
		errorHandler(){
			console.log('errorHandler：图片加载失败');
		},
	}
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
app.mount("#app");

</script>
</html>